import Vue from 'vue'
import App from './App.vue'
import router from './router'//路由
import ElementUI from 'element-ui' // el 框架
import 'element-ui/lib/theme-chalk/index.css' // el 的css
import '@/style/index.less' //公告样式
Vue.use(ElementUI);

//引入封装过滤的方法集合
import * as myfliter from '@/fliters/index'
 for( const key in myfliter){
  Vue.filter(key,myfliter[key])
}
// 引入自定义命令集合
import  {customImags} from '@/directive/index'

  Vue.directive("customImags",customImags())

Vue.config.productionTip = false

// 全局自定义指令，修复头像
Vue.directive('fiximg', {
  // 这里面的钩子指定使用这个指令的元素在不同的生命周期触发的函数
  inserted(el) {
    // console.log('元素插入页面，指令被调用')
    // el就是调用这个自定义指令的元素
    // console.log(el)
    // 当执行自定义指令的时候，使用指令的元素自动作为第一个参数传入
    // img有一个原生的事件  error
    el.onerror = () => {
      // 直接写@ 符号只会当成字符串
      // 需要像 nodedjs 一样加载模块的方式加载图片才行
      // 也可以使用 import 当成变量来使用
      el.src = require('@/assets/common/head.jpg')
    }

    // 处理错误以外，还要处理空 没有src 也需要处理，因为不会触发错误
    // 需要手动会触发,短路运算
    el.src = el.src || require('@/assets/common/head.jpg')
  },
  // 除了插入时，当页面更新时，也需要检查src是否为空
  update(el) {
    el.src = el.src || require('@/assets/common/head.jpg')
  }
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
